<template>
	<view class='shop-cart'>
		<template v-if="list.length>0">
			<!--自定义导航栏-->
			<uni-nav-bar title='购物车' :right-text=' isNavBar?"完成":"编辑" ' fixed='true'
				@clickRight='  isNavBar = !isNavBar  '></uni-nav-bar>

			<!--商品内容-->
			<view class='shop-list'>
				<view class='shop-item' v-for='(item,index) in list' :key='item.id'>
					
					<!-- 按钮 -->
					<label class="radio" @tap="selectedItem(index)">
						<radio value="" color="#FF3333" :checked="item.checked" /><text></text>
					</label>
					<image class='shop-img' :src="item.imgUrl" mode=""></image>
					<view class='shop-text'>
						<view class='shop-name'>{{item.name}}</view>
						<view class='shop-color f-color'>{{item.color}}</view>
						<view class='shop-price'>
							<view>¥{{item.pprice}}</view>

							<template v-if="!isNavBar">
								<view>*{{item.num}}</view>
							</template>
							<template v-else>
								<uni-number-box :value="item.num" :min="1" @change="changeNumber($event,index,item)">
								</uni-number-box>
							</template>


						</view>
					</view>
				</view>
			</view>
			<!--底部-->
			<view class='shop-foot'>
				<label class="radio foot-radio" @tap="checkedAllFn">
					<radio value="" color='#FF3333' :checked="checkedAll" /><text>全选</text>
				</label>
				<view class='foot-total'>
					<template v-if="!isNavBar">
						<view class='foot-count'>合计：<text class='f-active-color'>¥{{totalCount.pprice}}</text></view>
						<view class='foot-num' @tap="goConfirmOrder">结算({{totalCount.num}})</view>
					</template>
					<template v-else>
						<view class='foot-count' style="background-color:#000000;color: #FFFFFF;">移入收藏夹</text></view>
						<view class='foot-num' @tap="delGoodsFn">删除</view>
					</template>
				</view>
			</view>

		</template>
		<template v-else>
			<uni-nav-bar title='购物车' fixed="true"></uni-nav-bar>
			<view class="shop-else-list">
				<text>囧~购物车还是空的</text>
			</view>
		</template>
		<Tabbar currentPage="shopcart"></Tabbar>
	</view>
</template>

<script>
	import {
		mapState,
		mapActions,
		mapGetters,
		mapMutations
	} from 'vuex'
	import Tabbar from '@/common/Tobbr.vue'
	export default {
		data() {
			return {
				isNavBar: false,

			}
		},
		computed: {
			...mapState({
				list: state => state.cart.list,
				selectedList: state => state.cart.selectedList
			}),
			...mapGetters("cart",['checkedAll', 'totalCount'])
		},
		components: {
			Tabbar
		},
		onShow() {
			this.getData()
		},
		methods: {
			...mapActions("cart",['checkedAllFn', 'delGoodsFn']),
			...mapMutations("cart",['selectedItem', 'initGetData', 'initOrder']),

			async changeNumber(value, index, item) {

				try {
					//修改商品数量
					let res = await this.$Request({
						url: "/api/updateNumCart",
						method: "POST",
						header: {
							token: true
						},
						data: {
							goodsId: item.goods_id,
							num: value
						}
					})
					this.list[index].num = value;
				} catch (e) {
					console.log(e);
					uni.showToast({
						title: "请求失败",
						icon: 'none'
					})
				}

			},
			//获取商品列表
			async getData() {
				try {
					let res = await this.$Request({
						url: "/api/selectCart",
						method: "POST",
						header: {
							token: true
						}
					})
					//添加到数据库
					// console.log(res.data.data);
					console.log(res.data.data);
					//存储购物车数据
					this.initGetData(res.data.data)
				} catch (e) {
					//TODO handle the exception
					uni.showToast({
						title: "错误"
					})
				}

			},
			//进入确认订单
			async goConfirmOrder() {

				if (this.selectedList.length == 0) {
					return uni.showToast({
						title: "请至少选择一件商品",
						icon: 'none'
					})
				}
				let newList = [];
				this.list.forEach(item => {
					this.selectedList.filter(v => {
						if (item.id == v) {
							newList.push(item)
						}
					})
				})


				try {
					let res = await this.$Request({
						url: "/api/addOrder",
						method: "POST",
						header: {
							token: true
						},
						data: {
							arr: newList
						}
					})
					//存储订单号
					this.initOrder(res.data.data.data[0].order_id)
					if (res.data.data.success) {
						uni.navigateTo({
							url: `../confim-order/confim-order?detail=${JSON.stringify(this.selectedList)}`
						})
					}
				} catch (e) {
					//TODO handle the exception
					console.log(e);
				}



			}
		}
	}
</script>

<style scoped>
	.shop-else-list {
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		top: 0;
		background-color: #F7F7F7;
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.shop-list {
		padding-bottom: 100rpx;
	}

	.shop-item {
		display: flex;
		padding: 20rpx;
		align-items: center;
		background-color: #F7F7F7;
		margin-bottom: 10rpx;
	}

	.shop-img {
		width: 200rpx;
		height: 200rpx;
	}

	.shop-text {
		flex: 1;
		padding-left: 20rpx;
	}

	.shop-color {
		font-size: 24rpx;
	}

	.shop-price {
		display: flex;
		justify-content: space-between;
	}

	.shop-foot {
		border-top: 2rpx solid #F7F7F7;
		background-color: #FFFFFF;
		position: fixed;
		bottom: 120rpx;
		left: 0;
		width: 100%;
		height: 100rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.radio {
		transform: scale(0.7)
	}

	.foot-radio {
		padding-left: 20rpx;
	}

	.foot-total {
		display: flex;
	}

	.foot-count {
		line-height: 100rpx;
		padding: 0 20rpx;
		font-size: 32rpx;

	}

	.foot-num {
		background-color: #49BDFB;
		color: #FFFFFF;
		padding: 0 60rpx;
		line-height: 100rpx;
	}
</style>
